<html>
	<head>
		<title>Llamado AJAX</title>
		
		<!-- jQuery -->
		<script type="text/javascript" src="/tecnicosya/web/js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="/tecnicosya/web/js/jquery-ui-1.10.3.custom.min.js"></script>	
		<link type="text/css" rel="stylesheet" href="/tecnicosya/web/css/jquery/ui-darkness/jquery-ui-1.10.3.custom.min.css">
		
		<script type="text/javascript">
			$(function(){

				$("#btnCompletarLista").click(function(){
					var xhr = $.get('llamado_ajax');

					xhr.done(function(json){
						
						var array = $.parseJSON(json);
						
						var htmlTB = "";
						
						if(array.length > 0)
						{
							$.each(array, function() {
								 
								htmlTB += "<tr>" +
									"<td>" + this.id + "</td>" +
									"<td>" + this.nombre + "</td>" +
									"</tr>";
							});
						}
						else	
						{
							htmlTB = "<tr>" + 
									 "<td colspan='2' align='center'>No existen elementos</td>" + 
									 "</tr>";	
						}	
						
						
						$("#tbodyLista").html(htmlTB);
					});
				});				
			});
		</script>
	</head>	
	<body>		
		<input id="btnCompletarLista" type="button" value="Completar lista" />
		
		<div style="margin: 0 auto 0 auto;">
			<table border="1">
				<thead>
					<tr>
						<th>Id</th>
						<th>Nombre</th>
					</tr>
				</thead>
				<tbody id="tbodyLista">
				</tbody>
			</table>
		</div>		
	</body>
</html>